.root {
  --scrollarea-scrollbar-size: 12px;

  position: relative;
  overflow: hidden;

  &:where([data-autosize]) .content {
    min-width: min-content;
  }
}

.viewport {
  scrollbar-width: none;
  overscroll-behavior: var(--scrollarea-over-scroll-behavior);
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  height: 100%;

  &::-webkit-scrollbar {
    display: none;
  }

  &:where([data-scrollbars='xy'], [data-scrollbars='y']) {
    &:where(
      [data-offset-scrollbars='xy'],
      [data-offset-scrollbars='y'],
      [data-offset-scrollbars='present']
    ) {
      &:where([data-vertical-hidden]) {
        padding-inline-end: 0;
        padding-inline-start: 0;
      }

      &:not([data-vertical-hidden]) {
        padding-inline-end: var(--scrollarea-scrollbar-size);
        padding-inline-start: unset;
      }
    }
  }

  &:where([data-scrollbars='xy'], [data-scrollbars='x']) {
    &:where(
      [data-offset-scrollbars='xy'],
      [data-offset-scrollbars='x'],
      [data-offset-scrollbars='present']
    ) {
      &:where([data-horizontal-hidden]) {
        padding-bottom: 0;
      }

      &:not([data-horizontal-hidden]) {
        padding-bottom: var(--scrollarea-scrollbar-size);
      }
    }
  }
}

.viewportInner {
  min-width: 100%;
  display: table;
}

.scrollbar {
  user-select: none;
  touch-action: none;
  box-sizing: border-box;
  transition:
    background-color 150ms ease,
    opacity 150ms ease;

  padding: calc(var(--scrollarea-scrollbar-size) / 5);
  display: flex;
  background-color: transparent;
  flex-direction: row;

  @mixin hover {
    @mixin where-light {
      background-color: var(--mantine-color-gray-0);

      & > .thumb {
        background-color: rgba(0, 0, 0, 0.5);
      }
    }

    @mixin where-dark {
      background-color: var(--mantine-color-dark-8);

      & > .thumb {
        background-color: rgba(255, 255, 255, 0.5);
      }
    }
  }

  &:where([data-hidden], [data-state='hidden']) {
    display: none;
  }

  &:where([data-orientation='vertical']) {
    width: var(--scrollarea-scrollbar-size);
    top: 0;
    bottom: var(--sa-corner-width);
    inset-inline-end: 0;
  }

  &:where([data-orientation='horizontal']) {
    height: var(--scrollarea-scrollbar-size);
    flex-direction: column;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: var(--sa-corner-width);
  }
}

.thumb {
  flex: 1;
  border-radius: var(--scrollarea-scrollbar-size);
  position: relative;
  transition: background-color 150ms ease;
  overflow: hidden;
  opacity: var(--thumb-opacity);

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
  }

  @mixin where-light {
    background-color: rgba(0, 0, 0, 0.4);
  }

  @mixin where-dark {
    background-color: rgba(255, 255, 255, 0.4);
  }
}

.corner {
  position: absolute;
  opacity: 0;
  transition: opacity 150ms ease;
  display: block;
  inset-inline-end: 0;
  bottom: 0;

  @mixin where-light {
    background-color: var(--mantine-color-gray-0);
  }

  @mixin where-dark {
    background-color: var(--mantine-color-dark-8);
  }

  &:where([data-hovered]) {
    opacity: 1;
  }

  &:where([data-hidden]) {
    display: none;
  }
}

.content {
  min-width: 100%;
}
